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1. INTRODUCTION 

The use of quick response (QR) codes is now widely found, such as for attendance systems, and 
validation systems [1], [2]. Incorporating a QR code application with a face detection application is important 
to produce a system that is able to automatically save faces and read QR codes in the workplace at the same 
time. This could be the forerunner of a system that can select who can read the QR code. The face detection 
application uses the OpenCV library which makes it easy to simplify programs related to digital images. 

QR code was developed by Denso Corporation, a Japanese company that is mostly engaged in the 
automotive sector [3]-[5]. QR code is defined as the quick response code, which is a form of changing a barcode 
from a one-dimensional shape to a two-dimensional shape. There are two types of QR code, i.e.Static QR code 
and dynamic QR code [6], [7]. Static QR code is that containing information which is not required a specific 
application to translate the contents. Consequently, the static QR code can be used immediately with the help 
of the regular QR code reader application [8]. For example, a QR code, if scanned with an ordinary QR code 
reader application, it contains information that can directly link to a fixed web page [9]. QR code reader consists 
of 2 types, i.e. static and dynamic. The former is the QR code reader commonly used because the information 
can be directly understood by the users, while the latter is the QR code reader modified based on the QR code 
generator because of the required synchronization. Therefore, in the dynamic type, information will bemore 
secure as it needs synchronization. 
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In other words, the information that appears can be directly read by the user. Static QR code is widely 
used today because the QR code generator application as a QR code generator is available free. Dynamic QR 
code is the opposite of static QR code, namely QR code which contains information which requires a specific 
application in translating its contents [10], [11]. The example of using a dynamic QR code is QR-code for 
https://web.whatsapp.com, when scanned using a regular QR scanner will generally produce an 
incomprehensible message, because it is an encrypted message from the WhatsApp application [12]. If scanned 
by using the WhatsApp application, it will do navigation to the WhatsApp web for an account. Therefore, this 
kind of QR code can only be used by scanning with certain applications. 

This type of dynamic QR code is the object of research development, which is added a face detection 
process [13], [14]. With this face detection, it is expected that it will act as a trigger so that the QR code reader 
can work [15]. The built system consists of two parts, namely the first part is the generator or QR code generator 
side and the QR code image scanner (QR code reader). 


2. RESEARCH METHODS 

The method applied in this research is research and development (R&D), in which there are design, 
manufacture and system testing phases [16], [17]. Flowchart is used to make it easier for researchers to carry 
out the stages in research. In general, the flowchart of the research carried out is as shown in Figure 1. 


Preparation Stage 


Activities: 
Create a QR Code Generator That 
is Connected to the Database 


Activities: Activities: 
Make Face Detection Create a QR Code 
Reader 
Result: 
Scanner System 


Result: 
QR Code Image 
Generator System 


Activities: 
Testing and Analysis 


Research Result 


Figure 1. Research flowchart 


From Figure 1, the research begins with the preparation stage, i.e., to determine the producing or 
generating side of the QR code image (QR code Generator) and the scanning side of the QR code image (QR 
code reader). On the QR code generator side, a connection to the database is required so that information can 
be stored, for example to store information on Final Project Student services to replace the original signature 
in the form of ID, name, Final Project Student service. While the QR code reader requires two webcams and a 
connection to the same database as the QR code Generator. So as to produce a QR code image maker system 
and a QR code image scanning system. The test is carried out in a room with light that can still capture normal 
images by the computer. 


3. MATERIAL AND METHOD 

In this research, supporting materials and methods are needed to be used in the research. In order to 
support each other, a block diagram is needed. The research begins with creating a system workflow described 
in a block diagram as shown in Figure 2. 
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QR Code generator 


Server 


Computer 


Figure 2. System block diagram 


The explanation of Figure 2 is: 


Starting with the user accessing the server to get the QR code generator service (explanation to the 
arrow 1). Its function is to register information to be saved to a QR code image. Then the user fills in the 
available fields. 

Then the user notifies the server that the column is completed by pressing the available button. After that 
the server gives a reply in the form of a QR code image (explanation to the arrow 2). 

The explanation of the direction of arrow number 3, i.e. the QR code image received by the user, the 
contents of the information can be read if only using a certain scanner (reading device). To use the device, 
the user and the QR code image must be simultaneously scanned by the device. The discussion about these 
scanning devices is in the next section. If the user forces to use the regular QR code reader application to 
read the contents of the information in the QR code image, encrypted (random) text will appear. 

Then the computer will forward the data from the scanning results to the server (explanation to the 
arrow 4). 

Then the server responds to the data it receives by sending it to the sending computer (explanation to the 
arrow 5). 

After that the computer displays the information to the user through a screen based on the data it receives 
(explanation to the arrow 6). 


From Figure 2, hardware and software support is needed so that the research results can be as optimal as 
possible. 


3.1. Hardware and sofware 


The information inserted in the QR code image is in the form of ID, name, and Final Project Student 


services. This entry is used to generate QR code images by the QR code generator application later. The next 
step is how to extract the information. In this study, the required hardware and software are: 


a. 


The intended server is a private server or known as a virtual private server (VPS). This server does not 
have a real physical form like a computer in general but has services that can be accessed and managed 
[18]. Besides, every VPS definitely has a public IP. And this VPS can be configured based on its users. 
In this study applies a VPS with the Linux operating system. After the VPS can be accessed, the next step 
is to fill in the service in the form of a webserver [19], [20], that is using the Apache application, server 
scripts using personal home page (PHP) and database applications [21]-[24]. All of these applications are 
intended to build web-based QR code generator services and database servers. The use of the database 
here is to store information that will be embedded into a QR code image. In this study, a QR code image 
will be formed if the users have already completed the data in the form provided and then presses the 
submit button, which is as shown in Figure 3. Figure 3 is an initial display that must be completed in order 
that a QR code image can be generated. The filled data will be stored in the database and followed by the 
process of generating a QR code image as shown in Figure 4. The data stored in the database are intended 
to be recalled. In this study, in order that data appear automatically, the detected QR code image must be 
appropriate. The process for generating these images uses the help of the PHP library created by Kentaro 
Fukuchi and is an opensource library. 

The intended computer is a computer that is used for the QR code image scanning system and face 
detection that is on the user's side. Two webcam units are the additional hardware directly connected to 
the computer. The important specifications on the webcam are that they have autofocus and high 
definition (HD) resolution of 720p. The goal is that the object captured by this webcam is more focused 
and sharper, so that the processing program can easily process it. Both webcams use a USB port to connect 
to a computer. 
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The intended software is a programming language installed on the computer while the programming 
language used is the processing language [25], [26]. Processing is an open-source graphics library and 
integrated development environment (IDE) built for the electronic arts, new media arts, and visual design 
community with the aim of teaching the fundamentals of computer programming in a visual context. The 
Processing language uses the Java language, with additional simplifications such as additional classes and 
mathematical functions and operations. It also provides a graphical user interface to simplify the compile 
and execution stages. The program for processing QR codes requires additional program libraries, namely 
zxing4processing. This library was created by Salvatore Iaconesi and Rolf van Gelder who were released 
for its development. Moreover, the program for human face detection requires additional program 
libraries, i.e. opencv processing. This library is open source and includes a face detection algorithm called 
Haar like feature. Furthermore, this algorithm is supported by the cascade classifier to combine many 
features [27], [28]. 


_ submit 
Figure 3. The example of QR code generator service Figure 4. PHP QR code example 
3.2. Data 


There are two types of data taken in this study, i.e. the first is the reading distance by the scanning 


system (in this case the webcam) with the QR code image object only. The second is the reading distance 
between the scanner system and the QR code image object and the human face object simultaneously. Data 
collection is carried out alternately according to the stages. 


a. 


The data retrieving in the first form still uses a webcam unit to scan QR code images in real-time. The 
data collection procedure is: 

First, make two QR code images through the application in Figure 3. 

After getting the QR code image, make sure the image is saved on the smartphone. In this study, the 
screen size of the smartphone is 6.4 inches. Then zoom in to the maximum of the QR code image. 

After successfully getting a QR code image as shown in Figure 5, then proceed by testing it to get back 
the information previously entered through the QR code Generator. With a webcam installed on the 
computer, then the QR code image is placed on the webcam, the information that appears is shown in 
Figure 6. And the result will be sililar to in the information entered through the QR code generator as 
shown in Figure 3. 

Then, carry out the measurement of reading distance in which every change in the reading distance, its 
QR code image will be changed, resulting in Table 1. 


2 AQ\0\i EA 
OR 


Picture QR Code 


Figure 5. Display of QR code for testing Figure 6. The system display while the expected 
information appear 
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Table 1. Data retrieving with one unit of webcam 
No _Distance(cm) _Test1  Test2  Test3  Test4 Test 5 


1 1 0 0 0 0 0 
2 5 0 0 0 0 0 
3 10 1 0 1 0 1 
4 15 1 1 1 1 1 
3 20 1 1 1 1 1 
6 25 1 1 1 1 1 
7 30 1 1 1 1 1 
8 35 1 1 1 1 1 
9 40 1 1 1 1 1 
10 45 1 1 1 1 1 
11 50 1 1 1 1 1 
12 55 1 1 1 0 1 
13 60 0 1 1 0 0 
14 65 0 0 0 0 0 
15 70 0 0 0 0 0 
16 715 0 0 0 0 0 


b. Data retrieving in the second form uses two webcam units simultaneously, one webcam unit handles QR 
code images and the other handles human face detection. The data collection procedure is the same as 
data retrieving with a webcam unit, but there are some additions to the following points: 

— The position of the QR code image and the face object faces each webcam, in which the position of the 
QR code image will be changed by the data, while the position of the user's face does not change (fixed). 
The position of the face must strictly be put in the green square line on the computer screen; in this case 
the distance is 1 meter from the face detection webcam. In Figure 7 is a display when the QR code image 
can provide the expected information. This is indicated by containing the data NAME, SERVICE and 
ACC TIME. Meanwhile, if the QR code image cannot provide the expected information, the system 
responds in the form of a sentence with no data. 

— Then, the measurement of the reading distance is carried out in which every change in the reading 
distance, its QR code image will be changed, resulting in Table 2 and Table 3. 


o SISTEM PEMINDA! QRCODE DGN DETEKS! WAJAH 


ID = 0019987ce63858142ebd6713c26ebb30 
NAMA =Muhammad Faldy Bagusta Sitepu 
LAYANAN =nilai pki=80 


WAKTU ACC =2020-07-18 09:00:37.0 


Figure 7. System view when expected information appears 


During the experiment or testing, the resulted information is the same information as that entered at 
the beginning of getting the QR code image. This is because the information stored in the database can be 
retrieved based on the keywords contained in the image. Vice versa, information will not appear when it does 
not match. Interestingly, the utilization of QR code as two dimensional have been numerously deliver the 
benefit for various sectors due to the ability to store large information and extracting them with small amount 
of little distortion compare to one dimensional barcode [29], [30]. It can be said QR code as a fast readable 
way that can increase the process to scan, improving the degree of reading up to 360, support for more 
languages and durability against soil and damage such as several researches conducted for visual cryptography 
in ciphering messages [31], [32], securing the sharing process of personal confidential information either in 
term of forgery prevention or anti phishing attack [33]-[37]. In addition, there also several researches that focus 
on secure recognition process in login system using QR image [38], which mainly have challenges in term of 
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localization such as illumination variation and perspective distorting as well as the adaptation into embedded 
system platform for processing complexity and resource requirement [39]. On the other hand, in term of 
mobility and agility, the implementation of QR codes support various application such as smart attendance in 
the university [40] or even in broader level of digital education system [41] and smart city bus for the payment 
system [42]. Meanwhile, certain technique has been introduced to hide encrypted data using EK-EQR 
algorithm [43] to improve traceability system [44]. There is also necessity in the further improvement for QR 
code to protect information with steganography or cryptography in order to guard the knowledge against the 
attackers [45], which consider the error correction levels up to 30% [46] to the linkage of multimedia data [47], 
[48]. Interestingly, mobile computing present a great way to easily apply attendance systems [49] to large and 
complex battlefield interconnection systems [50], allowing QR codes to work and communicate with users 
anytime, anywhere and on any device. 


Table 2. Data retrieving with two webcams, the Table 3. Data retrieving with two webcams, 
detected user’s face undetected user’s face 
N Distsnce Test Test Test Test Test No Distsnce Test Test Test Test Test 
(cm) 1 2: 3 4 5 (cm) 1 2 3 4 5 
1 1 0 0 0 0) 0 1 1 0 0 0 0 0 
2 5 0 0 0 0 0 2 5 0 0 0 0 0 
3 10 0 0 1 1 1 S) 10 0 0 0 0 0 
4 15 1 1 1 1 1 4 15 0 0 0 0 0 
5 20 1 1 1 1 1 5 20 0 0 0 0 0 
6 25 1 1 1 1 1 6 25 0 0 0 0 0 
7 30 1 1 1 1 1 7 30 0 0 0 0 0 
8 35 1 1 1 1 1 8 35 0 0 0 0 0 
9 40 1 1 1 1 1 9 40 0 0) 0 0 0 
10 45 1 1 1 1 1 10 45 0 0 0 0 0 
11 50 1 1 1 1 1 11 50 0 0 0 0 0 
12 35 1 1 | 0 1 12 55 0 0 0 0 0 
13 60 1 1 0 0 0 13 60 0 0 0 0 0 
14 65 0 0 0 0 0 14 65 0 0 0 0 0 
15 70 0 0 0 0 0 15 70 0 0 0 0 0 
16 75 0 0 0 0 0 16 75 0 0 0 0 0 


4. RESULTS AND DISCUSSION 
The discussion begins with getting the parameters contained in Tables | to 3: 

— Column Distance (cm) is the distance between the QR code image and the webcam in centimeters. 

— Column 1“ test, 2™ test to 5" test are repeated data collection activities. 

— Numbers 0 and 1 describe whether or not is a change in information on the monitor screen. Its function 
is to find out the response from the webcam whether it can still process (indicated by changes in 
information data on the monitor screen) or cannot process QR code images (indicated by no change in 
data at all). For number 1, it means that the information on the screen has changed, while the number 0 
means that there is no change in the information on the screen. 

Then, in Table | there are rows containing non similar numbers, such as those in rows 3, 12, 13, while 

The other rows have similar numbers. So that the non-similar rows will find the approximate value is: 

- Row3=(1+04+1+0+4+1)/5 =3/5 =0.6 and becomes 1. 

—- Row 12=(1+1+4+1+0+41)/5=4/5 =0.8 and becomes 1. 

—- Row 13=(0+1+4+1+0+0)/5 =2/5 =0.4 and becomes 0. 

From the calculation of this approach, the condition in Table 1 is: 

— The distance at 10 cm has changes in information. 

— The distance at 55 cm has changes in information. 

— The distance at 60 cm has no change in information. 

Then in Table 2 there are rows containing non-similar numbers, such as rows 3, 12, 13., while the 
other rows have similar numbers. So that the non-similar rows will find the approximate value is: 

- Row3=(04041+4+1+4+1)/5 = 3/5 =0.6 and becomes 1 

—- Row 12=(1+1+1+0+41)/5=4/5=0.8 and becomes | 

- Row 13=(1+1+0+0+0)/5 = 2/5 =0.4 and becomes 0 

From the calculation of this approach, the condition in Table 2 is: 

— The distance at 10 cm has changes in information. 

— The distance at 55 cm has changes in information. 

— The distance at 60 cm has no change in information. 
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Continued in Table 3, all rows contain the number 0 which means there is no change or the system does not 
respond. Therefore, they can be summarized into the following Tables 4 and 5: 


Table 4. The results of the conclusion Table 1 Table 5. The results of the conclusion Table 2 
No Distance (cm) Status No Distance (cm) Status 
1 1 Unchange 1 1 Unchange 
2; 5: Unchange 2 5 Unchange 
3 10 Change 3 10 Change 
4 15 Change 4 15 Change 
5 20 Change 5 20 Change 
6 25 Change 6 25 Change 
7 30 Change 7 30 Change 
8 35 Change 8 35 Change 
9 40 Change 9 40 Change 
10 45 Change 10 45 Change 
11 50 Change 11 50 Change 
12 EP) Change 12 55 Change 
13 60 Unchange 13 60 Unchange 
14 65 Unchange 14 65 Unchange 
15 70 Unchange 15 70 Unchange 
16 75 Unchange 16 715 Unchange 


5. CONCLUSION 

In summary, perform face detection using a QR code as a face identifier that accesses the QR code so 
that it gets a track record. The success of reading the QR code is influenced by 2 factors, namely the first is the 
distance between the QR code object and the webcam and the second is detecting the user's face. With 
multicam, these two factors can work simultaneously, because each camera handles each process. Without 
these two factors, the system will not work optimally. In addition, the QR code reader (QR code reader) and 
QR code generator (QR code Generator) cannot be used without a VPS. This is because every transaction can 
be stored/recorded in it, in the form of the user's face and information. Besides, the dynamic type of QR code 
reader applied in this study requires a QR code generator for synchronizing information, so that the information 
cannot be directly understood by users when using any QR code reader device on the market. With the ability 
to detect the user's face and store it, it is hoped that in the next research the system can secure the information 
contained in the QRCode based on the user's face through face recognition. 
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